Meta:
Seleccione una imagen del almacenamiento local (emulador de IOS) con Expo ImagePicker y cárguela en el almacenamiento de Firebase
Salida de la consola:
Upload is 0% done Upload is runningPero se atasca allí, la imagen no se carga
Primero llamo a esta función para elegir una imagen del almacenamiento local y recuperar el blob, la imagen se muestra bien en la pantalla, recibo un error si intento registrar el blob en la consola diciendo que no se puede mostrar, lo cual supongo que se debe a es una gota
async function pickImage() { result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.All, allowsEditing: true, aspect: [4, 3], quality: 1, }); if (!result.cancelled) { let imageFile = await fetch(result.uri); let imageBlob = await imageFile.blob() setBlob(imageBlob) } }luego intento subir al almacenamiento de Firebase:
function uploadToFirebase(){ const storageRef = ref(storage, 'anything.jpg'); const uploadTask = uploadBytesResumable(storageRef, blob); uploadTask.on('state_changed', (snapshot) => { // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded setImageProgress((snapshot.bytesTransferred / snapshot.totalBytes) * 100) console.log('Upload is ' + imageProgress + '% done'); switch (snapshot.state) { case 'paused': console.log('Upload is paused'); break; case 'running': console.log('Upload is running'); break; } }, (error) => { // A full list of error codes is available at // https://firebase.google.com/docs/storage/web/handle-errors switch (error.code) { case 'storage/unauthorized': // User doesn't have permission to access the object break; case 'storage/canceled': // User canceled the upload break; // ... case 'storage/unknown': // Unknown error occurred, inspect error.serverResponse break; } }, () => { // Upload completed successfully, now we can get the download URL getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { console.log('File available at', downloadURL); setLoadedImage(downloadURL) }); } ); }Probé todas las iteraciones de esto que pude encontrar en línea, pero fue en vano
Yo tuve el mismo problema. Después de buscar en diferentes temas, he encontrado una respuesta. El siguiente código carga la imagen en Firebase Storage
const uploadToFirebase = async () { const id = 101; // this is the id of the file or you can name it const filename = `${id}`; const blob = await new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); // on load xhr.onload = function () { resolve(xhr.response); }; // on error xhr.onerror = function (e) { console.log(e); reject(new TypeError("Network request failed")); }; // on complete xhr.responseType = "blob"; xhr.open("GET", pickImageResult.uri, true); xhr.send(null); }); // a reference that points to this 'userphoto/101' location const fileRef = ref(getStorage(), 'usersphoto/${filename}'); // upload the 'blob' (the image) in the location refered by 'fileRef' const result = await uploadBytes(fileRef, blob); // We're done with the blob, close and release it blob.close(); }Nota: pickImageResult.uri es el resultado de la imagen de ImagePicker.launchImageLibraryAsync();